<template>
	<view class="template-agreement">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :bottomShadow="false" backgroundColor="#FFFFFF" customBack fixed>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center">
				<text class="tn-text-bold tn-text-xl tn-color-black">用户平台协议</text>
			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 20 +'px', paddingBottom: '200rpx'}" class="agreement-content">
			<scroll-view scroll-y class="agreement-scroll">
				<view class="agreement-section">
					<view class="agreement-title">一、用户协议总则</view>
					<view class="agreement-text">
						1.本协议双方为 乐码平台（以下简称"运营方"）和乐码平台的注册用户（以下简称"用户"）。<br>
						2.用户在注册前请仔细阅读本协议的条款，并按照页面上的提示完成全部注册程序。<br>
						3.用户在进行注册过程中点击"同意"按钮，即表示用户已充分知悉和完全接受本协议项下全部条款，进而与运营方达成本协议。<br>
						4.运营方有权不时对本协议项下相关规则作出修改或补充，并于网站公布。用户若继续使用即视为您接受修订后的本协议条款。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">二、用户服务使用说明</view>
					<view class="agreement-text">
						1.用户在注册时应按照注册提示填写准确的 用户名、密码、手机号等相关个人资料，符合完整、准确、真实的要求。<br>
						2.用户一旦注册成功，便成为运营方合法的注册用户，将获得本网站的一个用户账号和相应密码，用户可随时修改自己的用户密码。用户应对其账号安全负全部责任，并应对其用户名下所进行的所有行为和事件承担相应的法律责任。<br>
						3.用户同意接受运营方通过或其他方式向用户发送有关商业信息。<br>
						4.运营方不对用户所发布信息的删除或储存失败负责。<br>
						5.运营方有判定用户的行为是否符合本网站服务条款要求的权利，如果用户违背了服务条款的规定，本网站有权对其用户的账号权限封禁。<br>
						6.用户不得以任何非法目的或其它方式对运营方的个人用户账号进行转让、转借、倒卖、账号共享等行为（用户账号仅限由其本人使用）。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">三、协议内容的变更和修订</view>
					<view class="agreement-text">
						1.运营方有权在必要时修改服务条款，修改后的协议可以在运营方上查看。<br>
						2.用户如果不同意运营方所改动的内容，可自行停止使用本站网络服务。<br>
						3.如果用户继续享用本站网络服务，则视为同意接受本网站服务条款的变动。<br>
						4.运营方可随时根据实际情况中断或终止一项或多项网络服务而无需对任何用户或第三方承担任何责任，如用户对一项或多项网络服务的中断或终止有异议，可以行使如下权利：<br>
						Ⅰ.自行停止使用运营方的网络服务。<br>
						Ⅱ.通知运营方停止对该用户的服务。 结束用户服务后，用户使用网络服务的权利立即终止，从终止时起，用户没有权利再进行处理任何未完成的信息或服务，运营方也没有义务为其传送任何未处理的信息或未完成的服务给用户或任何第三方。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">四、用户隐私保护</view>
					<view class="agreement-text">
						运营方将严格履行用户个人隐私保密义务，承诺不公开、编辑或透露用户个人信息，但以下特殊情况除外：<br>
						1.经注册用户事先许可授权；<br>
						2.遵守国家法律法规或配合相关政府部门的要求；<br>
						3.遵从运营方合法服务程序；<br>
						4.为维护社会公众利益以及运营方的合法权益所必须。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">五、注册用户的权利与义务</view>
					<view class="agreement-text">
						1.注册用户在使用运营方产品和服务时，必须遵守中华人民共和国相关法律法规的规定，用户应同意将不会利用本服务进行任何违法或不正当的活动，否则用户将自行承担由此产生的一切法律责任。<br>
						2.用户在账号使用过程中不得上载、展示、张贴、传播或以其它方式传送含有下列内容之一的信息：<br>
						I.危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；<br>
						II.损害国家荣誉和利益的；<br>
						III.煽动民族仇恨、民族歧视、破坏民族团结的；<br>
						IV.破坏国家宗教政策，宣扬邪教和封建迷信的；<br>
						V.散布谣言，扰乱社会秩序，破坏社会稳定的；<br>
						VI.散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<br>
						VII.侮辱或者诽谤他人，侵害他人合法权利的；<br>
						VIII.含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容。<br>
						3.不得为任何非法目的而使用网络服务系统。<br>
						4.不得利用运营方产品和服务故意制作、传播计算机病毒等破坏性程序，或其他从事任何危害计算机信息网络安全的行为。<br>
						5.若用户行为违反上述约定，运营方有权作出独立判断并立即取消用户的服务账号，用户应对自己网上的行为承担一切法律责任，运营方的系统记录有可能作为用户违反法律的证据提交给相关主管部门。<br>
						6.用户应同意保障和维护运营方全体成员及其他用户的利益，如因违反本协议或违反有关的法律法规而给运营方或任何第三者造成损失，用户应承担因此产生的法律责任。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">六、运营方网络服务内容的所有权</view>
					<view class="agreement-text">
						1.运营方定义的网络服务内容包括但不限于：浏览页、文字、图片、图表、图形、标识、服务标记等。该等内容均受《计算机软件保护条例》及其他相关法律法规的保护。<br>
						2.未经运营方或其他有权第三方的事先许可授权，用户不得对包括但不限于：网络服务相关的文字、图片、图表、图形、标识等在内的任何内容进行转载、翻录、复制、发行、破解、信息网络传播或其他违反知识产权相关法律、法规的行为，否则所导致的一切民事、行政或刑事责任，由用户自行承担。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">七、免责声明</view>
					<view class="agreement-text">
						1.用户同意承担使用运营方产品和服务所存在的一切风险以及因使用网络服务而产生的一切后果，运营方对用户不承担任何责任。<br>
						2.运营方不担保服务一定能满足用户的要求，也不担保服务不会中断，亦对服务的及时性，安全性及可能发生的技术错误均不作任何担保。<br>
						3.任何由于黑客攻击、计算机病毒侵入或发作、政府管制、硬件故障、不可抗力等非运营方故意或严重过失而造成的用户个人资料泄露、丢失、被盗用、被篡改或服务暂定或终止的，对用户可能造成的风险或损失，运营方不承担法律责任。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">八、其他约定</view>
					<view class="agreement-text">
						1.用户同意因本平台服务产生的任何争议均适用中华人民共和国法律，相关争议任何一方可向运营方住所地人民法院提起诉讼解决。<br>
						2.本协议中的标题仅为方便而设，不影响对于条款本身的解释。本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，其余条款仍应具有约束力。
					</view>
				</view>
				
				<view class="agreement-section">
					<view class="agreement-title">九、联系我们</view>
					<view class="agreement-text">
						如果您对本协议或本服务有任何疑问、意见或建议，可通过以下方式与我们联系：<br>
						发送电子邮件至：78910JQK@qq.com<br>
						本协议最终解释权归乐码平台所有。
					</view>
				</view>
				
				<view class="tn-padding-bottom-xl"></view>
			</scroll-view>
		</view>
		
		<!-- 底部固定区域 -->
		<view class="agreement-fixed-bottom">
			<view class="agreement-text tn-text-center">{{ canAgree ? '请仔细阅读协议内容' : `请仔细阅读协议内容（${countdown}秒）` }}</view>
			<view 
				class="agreement-button" 
				:class="[canAgree ? 'agreement-button-active' : 'tn-bg-gray']"
				@click="canAgree && agreeAndContinue()"
			>
				同意并继续
			</view>
			<view class="agreement-hint tn-text-center">点击同意即表示您已阅读并接受本协议</view>
		</view>
	</view>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'

	export default {
		name: 'PlatformAgreement',
		mixins: [templatePageMixin],
		data() {
			return {
				countdown: 5, // 倒计时秒数
				canAgree: false, // 是否可以点击同意按钮
				timer: null, // 定时器
				hasAgreed: false // 是否已经同意协议
			}
		},
		onReady() {
			// 启动倒计时
			this.startCountdown();
		},
		onHide() {
			// 页面隐藏时，如果用户没有同意协议就返回，则通知取消勾选
			if (!this.hasAgreed) {
				console.log("页面隐藏，发送协议取消事件");
				uni.$emit('agreementCancelled', true);
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearTimer();
			// 如果用户没有同意协议就返回，则通知取消勾选
			if (!this.hasAgreed) {
				console.log("页面卸载，发送协议取消事件");
				uni.$emit('agreementCancelled', true);
			}
		},
		methods: {
			// 启动倒计时
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.canAgree = true;
						this.clearTimer();
					}
				}, 1000);
			},
			// 清除定时器
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			// 同意并继续
			agreeAndContinue() {
				if (!this.canAgree) return;
				
				// 设置已同意标志
				this.hasAgreed = true;
				
				// 这里可以添加同意后的逻辑，例如返回上一页或跳转到下一页
				uni.navigateBack({
                    success: () => {
                        // 发送事件通知其他页面用户已同意协议
                        uni.$emit('agreementAccepted', true);
                    }
                });
			},
			// 返回处理
			goBack() {
				// 如果用户没有同意协议就返回，则通知取消勾选
				if (!this.hasAgreed) {
					console.log("手动返回，发送协议取消事件");
					uni.$emit('agreementCancelled', true);
				}
				uni.navigateBack();
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-agreement {
		background-color: #FFFFFF;
		min-height: 100vh;
		position: relative;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	}

	.agreement-content {
		padding: 0 30rpx;
	}
	
	.agreement-scroll {
		height: calc(100vh - 120rpx - 200rpx); /* 减去导航栏和底部固定区域的高度 */
	}
	
	.agreement-section {
	    padding: 0 50rpx;
		margin-bottom: 40rpx;
	}
	
	.agreement-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.agreement-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}
	
	/* 底部固定区域 */
	.agreement-fixed-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx 0;
		background-color: #FFFFFF;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
	}
	
	.agreement-button {
		margin: 30rpx auto;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #999;
		font-size: 30rpx;
		transition: all 0.3s;
	}
	
	.agreement-button-active {
		background-color: #3165CC;
		color: #FFFFFF;
	}
	
	.agreement-hint {
		font-size: 24rpx;
		color: #999;
	}
</style>